<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>值,引用</h1>

    <select id="prov" onchange="handle()">
       <option>请选择</option>
    </select>
    <select id="city"></select>

<script>
// let a = 'hello'
// let b = new String('hello')

// console.log( typeof a );  // 值 string
// console.log( typeof b );  // 对象 object
// console.log( a == b );

// a.price = 9000
// console.log( a.price );
// b.price = 9000
// console.log( b.price );

// function change( t ){
//     t.price = 9000
// }

// let obj = {
//     name: '华为',
//     price: 2000
// }

// change(a);
// console.log('a= ', a );
// change(obj);
// console.log('b= ',obj );


// a = 'hello'
// t = 'world'


// obj = {name: '华为', price: 9000 }
// t.price = 9000

// let a = [ 1,2,3]

// function change( t ){
//    t.push('龙龟')
// }
// change(a);
// console.log( a );

// 二维数组
var prov =[
   ['湖南省','长沙','株洲','湘潭'],
   ['湖北省','AAA','BBB','CCCC'],
   ['广东省','DDD','EEE','FFF'],
   ['江西省','GGG','HHH','LLL','JJJ','KKK']
];

// 把省名添加到第一个select
let pro =  document.querySelector('#prov')
let city =  document.querySelector('#city')
for (let a of prov) {
   let op  = new Option(a[0],a[0])
   pro.add(op)
}
//把市添加到第二个
function handle(){
   //清空原有的值
   city.options.length =0 ;
   var p =  pro.value ; //省名
   for(let i =0;i<prov.length;i++){
      if(prov[i][0]==p){
        for(let j=1;j<prov[i].length; j++){
            let op  = new Option(prov[i][j],prov[i][j])
            city.add(op) 
        }
      }
   }
}

</script>

</body>
</html>